<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="section-wrapper" style="margin-bottom: 32px;">
          <div class="box-group">
            <div class="title">
              <el-link class="house" type="primary"
                 @click="onHouseGroupChange('A04')">
                A04
                <i class="el-icon-right el-icon--right"></i>
              </el-link>
              <div>
                <el-tag effect="light" type="success">
                  <span class="text">扫码：{{ a04.scanned || 0}}个</span>
                </el-tag>

                <el-tag effect="dark" type="success">
                  <span class="text">运行：{{ a04.running || 0}}个</span>
                </el-tag>
              </div>

              <div>
                <el-tag effect="dark" type="primary">
                  <span class="text">待机：{{ a04.pending || 0}}个</span>
                </el-tag>

                <el-tag effect="dark" type="danger">
                  <span class="text">异常：{{ a04.error || 0}}个</span>
                </el-tag>
                <el-tag effect="light" type="info">
                  <span class="text">空闲：{{ a04.idle || 0}}个</span>
                </el-tag>
              </div>
            </div>
            <div class="content">
              <div v-for="item in houses4" :key="item.id">
                <el-button circle
                  :type="getType(item.status)"
                  :plain="item.status == 1"
                  @click="navToHouse('A04', item.id)" >
                  {{item.sn}}
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="section-wrapper" style="margin-bottom: 32px;">
          <div class="box-group">
            <div class="title">
              <el-link class="house" type="primary"
                       @click="onHouseGroupChange('A03')">
                A03
                <i class="el-icon-right el-icon--right"></i>
              </el-link>
              <div>
                <el-tag effect="light" type="success">
                  <span class="text">扫码：{{ a03.scanned || 0}}个</span>
                </el-tag>

                <el-tag effect="dark" type="success">
                  <span class="text">运行：{{ a03.running || 0}}个</span>
                </el-tag>
              </div>

              <div>
                <el-tag effect="dark" type="primary">
                  <span class="text">待机：{{ a03.pending || 0}}个</span>
                </el-tag>

                <el-tag effect="dark" type="danger">
                  <span class="text">异常：{{ a03.error || 0}}个</span>
                </el-tag>

                <el-tag effect="light" type="info">
                  <span class="text">空闲：{{ a03.idle || 0}}个</span>
                </el-tag>
              </div>
            </div>
            <div class="content">
              <div v-for="item in houses3" :key="item.id">
                <el-button circle
                  :type="getType(item.status)" :plain="item.status == 1"
                  @click="navToHouse('A03', item.id)" >
                  {{item.sn}}
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="section-wrapper" style="margin-bottom: 32px;">
          <div class="box-group">
            <div class="title">
              <el-link class="house" type="primary"
                       @click="onHouseGroupChange('A02')">
                A02
                <i class="el-icon-right el-icon--right"></i>
              </el-link>
              <div>
                <el-tag type="info">
                  <span class="text">扫码：0个</span>
                </el-tag>

                <el-tag type="success">
                  <span class="text">运行：0个</span>
                </el-tag>
              </div>

              <div>
                <el-tag type="warning">
                  <span class="text">待机：0个</span>
                </el-tag>

                <el-tag type="danger">
                  <span class="text">异常：0个</span>
                </el-tag>
                <el-tag effect="light" type="info">
                  <span class="text">空闲：0个</span>
                </el-tag>
              </div>
            </div>
            <div class="content">
              <div v-for="item in houses2" :key="item.id">
                <el-button circle :type="getType(item.status)">
                  {{item.id}}
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-col>

      <el-col :span="6">
        <div class="section-wrapper" style="margin-bottom: 32px;">
          <div class="box-group">
            <div class="title">
              <el-link class="house" type="primary"
                       @click="onHouseGroupChange('A01')">
                A01
                <i class="el-icon-right el-icon--right"></i>
              </el-link>
              <div>
                <el-tag type="info">
                  <span class="text">扫码：0个</span>
                </el-tag>

                <el-tag type="success">
                  <span class="text">运行：0个</span>
                </el-tag>
              </div>

              <div>
                <el-tag type="warning">
                  <span class="text">待机：0个</span>
                </el-tag>

                <el-tag type="danger">
                  <span class="text">异常：0个</span>
                </el-tag>

                <el-tag effect="light" type="info">
                  <span class="text">空闲：0个</span>
                </el-tag>
              </div>

            </div>
            <div class="content">
              <div v-for="item in houses1" :key="item.id">
                <el-button circle :type="getType(item.status)">
                  {{item.id}}
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getDeviceStatus } from '@/api/device'

const houses1 = [];
for (let i = 1; i <= 36; i++) {
  houses1.push({
    id: i < 10 ? ('0' + i) : ('' + i),
    status: -1
  })
}


const houses3 = [];
for (let i = 1; i <= 36; i++) {
  houses3.push({
    id: i,
    sn: i < 10 ? ('0' + i) : ('' + i),
    status: 0
  });
}

const houses4 = [];
for (let i = 1; i <= 36; i++) {
  houses4.push({
    id: i,
    sn: i < 10 ? ('0' + i) : ('' + i),
    status: 0
  });
}

export default {
  name: 'DashboardAdmin',
  components: {
  },
  data() {
    return {
      houses1: houses1,
      houses2: houses1,
      houses3: houses3,
      houses4: houses4,
      house3Group: '',
      house4Group: '',

      a03: {
        scanned: 0,
        running: 0,
        pending: 0,
        error: 0,
        idle: 0
      },
      a04: {
        scanned: 0,
        running: 0,
        pending: 0,
        error: 0,
        idle: 0
      }
    }
  },

  created() {
    this.getList()
  },

  methods: {
    onHouseGroupChange(house) {
      if (house != 'A03' && house != 'A04') return;

      let group = house == 'A03' ? this.house3Group : this.house4Group;

      this.$router.push({
        path: './status/index',
        query: {
          house,
          group
        }
      })
    },

    navToHouse(house, id) {
      if (house != 'A03' && house != 'A04') return;

      let group = 'A车';
      if (house == 'A03') {
        if (id <= 9) {
          group = 'A车';
        } else if (id <= 18) {
          group = 'B车';
        } else if (id <= 27) {
          group = 'C车';
        } else {
          group = 'D车';
        }
      }

      if (house == 'A04') {
        if (id <= 8) {
          group = 'A车';
        } else if (id <= 16) {
          group = 'B车';
        } else if (id <= 24) {
          group = 'C车';
        } else {
          group = 'D车';
        }
      }

      this.$router.push({
        path: './status/index',
        query: {
          house,
          group
        }
      })
    },

    getType(status) {
      switch (status) {
        case 1:
          return 'success';

        case 2:
          return 'success';

        case 3:
          return 'primary';

        case 9:
          return 'danger';

        case 5:
          return 'danger';

        case -1:
          return 'info'

        case 0:
          return 'normal'

        default:
          return 'info'
      }
    },

    getList() {
      getDeviceStatus('A04').then(res => {
        let datas = res.data.data
        datas.forEach(d => {
          let index = d.channel.substring(3, 5)
          this.houses4[parseInt(index) - 1].status = d.status

          if (d.status === 1) {
            this.a04.scanned++
          } else if (d.status === 2) {
            this.a04.running++
          } else if (d.status === 3) {
            this.a04.pending++
          } else if (d.status === 9 || d.status === 5) {
            this.a04.error++
          } else {
            this.a04.idle++
          }
        })

        this.a04.idle = this.houses4.length - (this.a04.scanned
          + this.a04.running + this.a04.pending + this.a04.error);
      })
      getDeviceStatus('A03').then(res => {
        let datas = res.data.data

        datas.forEach(d => {
          let index = d.channel.substring(3, 5)
          this.houses3[parseInt(index) - 1].status = d.status

          if (d.status === 1) {
            this.a03.scanned++
          } else if (d.status === 2) {
            this.a03.running++
          } else if (d.status === 3) {
            this.a03.pending++
          } else if (d.status === 9 || d.status === 5) {
            this.a03.error++
          }
        })

        this.a03.idle = this.houses3.length - (this.a03.scanned
          + this.a03.running + this.a03.pending + this.a03.error);
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.stat-container {
  .el-tag {
    height: 40px;

    .el-button {
      vertical-align: middle;
    }

    .text {
      height: 36px;
      line-height: 36px;
      font-size: 16px;
    }
  }
}

.box-group {
  width: 100%;

  .title {
    background-color: #f5f7fa;
    color: #909399;
    position: relative;
    border: 1px solid #dcdfe6;
    padding: 0 20px;
    text-align: center;
    border-right: 0;
    border-radius: 4px 0 0 4px;

    .house {
      padding: 10px 10px;
      font-weight: bolder;
    }

    .el-tag {
      margin-top: 5px;
      margin-bottom: 5px;
    }
  }

  .content {
    background-color: #fff;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    /*display: flex;*/
    /*flex-wrap: wrap;*/
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: repeat(auto-fill, 48px);
    height: 950px;
    outline: none;
    padding: 20px 15px;
    width: 100%;
    border-left: 0;
    border-radius: 0 4px 4px 0;

    div {
      text-align: center;
      height: 50px;

      .el-button {
        margin: 4px;
      }
    }
  }
}

.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .section-wrapper {
    background: #fff;
    padding: 16px;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
